<template>
    <div>
        <h1>首页</h1>
        房型名称: <input type="text" v-model="find.name">
        状态: 
        <input type="radio" v-model="find.state" name="state" :value="true">启用
        <input type="radio" v-model="find.state" name="state" :value="false">禁用
        <input type="button" value="查询" @click="Getshow">
        <input type="button" value="清空" @click="QK">
        <table class="table">
            <thead>
                <tr>
                    <th>房间编号</th>
                    <th>房型名称</th>
                    <th>门市销售价格</th>
                    <th>房间数</th>
                    <th>状态</th>
                    <th>房间号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{d.Id}}</td>
                    <td>{{d.Name}}</td>
                    <td>￥{{d.Price}}</td>
                    <td>{{d.FJnum}}</td>
                    <td>{{d.State==true?"启用":"停用"}}</td>
                    <td>{{d.FJstring}}</td>
                    <td>
                        <input type="button" value="删除" @click="Dels(d.Id)">
                        <input type="button" value="编辑" @click="Getupt(d.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            总记录数: {{ fysy.totalnum }}条,总页数:{{ fysy.totalpage }}条,
            当前页: {{ find.pageindex }}页 ,每页显示:{{ find.pagesize }}条
        </span>
        <input type="button" value="首页" @click="FY(1)">
        <input type="button" value="上一页" @click="FY(find.pageindex-1)">
        <input type="button" v-for="d in fysy.totalpage" :value="d" @click="FY(d)">
        <input type="button" value="下一页" @click="FY(find.pageindex+1)">
        <input type="button" value="尾页" @click="FY(fysy.totalpage)">
        每页显示:
        <select v-model="find.pagesize" @change="Getshow">
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
            <option value="4">4条/页</option>
        </select>
        前往:
        <input type="number" v-model="find.pageindex">
        <input type="button" value="前往" @click="Shows">

    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

//查询条件
const find=ref({
    name:"",
    state:null,
    pageindex:1,
    pagesize:2
})

//循环
const data=ref([{
      "Id": 0,
      "Name": "",
      "Price": 0,
      "FJnum": 0,
      "State": true,
      "FJstring": "",
      "IsDek": true
}])

//翻页使用
const fysy=ref({
    totalnum:0,
    totalpage:0
})

//钩子
onMounted(() => {
    Shows();
})


//显示
const Shows=()=>{
    axios.get("https://localhost:7249/api/Fx/GetFX",{params:find.value}).then(res=>{
        data.value=res.data.list;
        fysy.value.totalnum=res.data.totalnum;
        fysy.value.totalpage=Math.ceil(fysy.value.totalnum/find.value.pagesize);
    })
}


//翻页
const FY=(vid:number)=>{
    if(vid>=1 && vid<=fysy.value.totalpage){
        find.value.pageindex=vid;
        Shows();
    }
}

//查询按钮
const Getshow=()=>{
    find.value.pageindex=1;
    Shows();
}


//重置
const QK=()=>{
    find.value.name="";
    find.value.state=null;
}


//删除
const Dels=(vid:any)=>{
    if(confirm("确定要删除吗?")){
    axios.get("https://localhost:7249/api/Fx/Dels",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            Shows();
        }else{
            alert("删除失败");
            return;
        }
    })
}
}

//跳转修改
var tuter=useRouter();
const Getupt=(vid:any)=>{
    tuter.push({path:"/Upt",query:{id:vid}})
}

</script>

<style scoped>

</style>